<template>
  <div class="sku-list-container">
    <!-- 搜索筛选区域 -->
    <el-card shadow="never" class="search-card">
      <el-form :model="skuQuery" label-width="80px" class="search-form">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="商品分类">
              <el-cascader
                  v-model="skuQuery.categoryId"
                  :options="categoryList"
                  :props="props"
                  placeholder="请选择分类"
                  clearable
                  @focus="getCategoryList"
                  style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="16" :lg="12" :xl="12">
            <el-form-item label="关键词">
              <el-input
                  v-model="skuQuery.keyword"
                  placeholder="请输入商品名称或关键词"
                  clearable
                  @keyup.enter="getSkuPage"
              >
                <template #append>
                  <el-button
                      type="primary"
                      icon="Search"
                      @click="getSkuPage"
                      :loading="loading"
                  >搜索</el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 商品列表区域 -->
    <el-card shadow="never" class="list-card">
      <el-skeleton :loading="loading" animated :count="4" :throttle="500">
        <template #default>
          <div v-if="skuPage.list.length === 0" class="empty-container">
            <el-empty description="暂无商品数据" :image-size="200">
              <el-button type="primary" @click="resetSearch">重置搜索条件</el-button>
            </el-empty>
          </div>
          <div v-else>
            <div class="sku-grid">
              <sku-card
                  v-for="item in skuPage.list"
                  :key="item.skuId"
                  :sku="item"
                  @click="goSkuDetail(item.skuId)"
                  class="sku-item"
              />
            </div>

            <div class="pagination-container">
              <el-pagination
                  v-model:current-page="skuQuery.pageNum"
                  v-model:page-size="skuQuery.pageSize"
                  :total="skuPage.total"
                  :page-sizes="[10, 20, 30, 50]"
                  layout="total, sizes, prev, pager, next, jumper"
                  background
                  @size-change="getSkuPage"
                  @current-change="getSkuPage"
              />
            </div>
          </div>
        </template>

        <template #template>
          <div class="skeleton-grid">
            <div v-for="item in 8" :key="item" class="skeleton-item">
              <el-skeleton-item variant="image" class="skeleton-image"/>
              <div class="skeleton-content">
                <el-skeleton-item variant="h3" class="skeleton-title"/>
                <div class="skeleton-price">
                  <el-skeleton-item variant="text" class="skeleton-text"/>
                  <el-skeleton-item variant="text" class="skeleton-text-small"/>
                </div>
              </div>
            </div>
          </div>
        </template>
      </el-skeleton>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from "vue-router"
import { Calendar, Search } from '@element-plus/icons-vue'
import { reqGetSkuPage } from "@/api/serve/re-market/sku"
import { reqGetSpuCategoryTreeList } from "@/api/serve/re-market/category"
import SkuCard from '@/components/re-market/SkuCard.vue'

const router = useRouter()

// 查询参数
const skuQuery = reactive({
  keyword: '',
  categoryId: '',
  pageNum: 1,
  pageSize: 10
})

// 分页数据
const skuPage = reactive({
  pageNum: 1,
  total: 0,
  list: []
})

// 分类数据
const categoryList = ref([])
const props = {
  label: 'name',
  value: 'categoryId',
  children: 'children',
  emitPath: false,
  checkStrictly: true // 可选择任意一级
}

const loading = ref(true)

// 获取分类列表
const getCategoryList = () => {
  if (categoryList.value.length === 0) {
    reqGetSpuCategoryTreeList().then(res => {
      categoryList.value = res.data
    })
  }
}

// 获取商品列表
const getSkuPage = () => {
  loading.value = true
  reqGetSkuPage(skuQuery).then(res => {
    Object.assign(skuPage, res.data)
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}

// 重置搜索
const resetSearch = () => {
  skuQuery.keyword = ''
  skuQuery.categoryId = ''
  skuQuery.pageNum = 1
  getSkuPage()
}

// 跳转商品详情
const goSkuDetail = (skuId: number) => {
  router.push({
    path: '/serve/re-market/sku/detail',
    query: { skuId }
  })
}

onMounted(() => {
  getSkuPage()
})
</script>

<style scoped lang="scss">
.sku-list-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;

  .search-card {
    margin-bottom: 20px;
    border-radius: 8px;

    :deep(.el-card__body) {
      padding: 20px;
    }
  }

  .list-card {
    border-radius: 8px;

    :deep(.el-card__body) {
      padding: 0;
    }
  }

  .search-form {
    padding: 10px 0;
  }

  .empty-container {
    padding: 60px 0;
    text-align: center;
  }

  .sku-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    padding: 20px;

    .sku-item {
      transition: all 0.3s;
      cursor: pointer;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
      }
    }
  }

  .pagination-container {
    padding: 20px;
    display: flex;
    justify-content: center;
    border-top: 1px solid var(--el-border-color-light);
  }

  .skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    padding: 20px;

    .skeleton-item {
      border-radius: 8px;
      overflow: hidden;
    }

    .skeleton-image {
      width: 100%;
      height: 200px;
    }

    .skeleton-content {
      padding: 14px;
    }

    .skeleton-title {
      width: 70%;
      height: 24px;
      margin-bottom: 16px;
    }

    .skeleton-price {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .skeleton-text {
      width: 60px;
      height: 18px;
    }

    .skeleton-text-small {
      width: 40px;
      height: 16px;
    }
  }
}

@media (max-width: 768px) {
  .sku-list-container {
    padding: 10px;

    .sku-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      padding: 10px;
    }

    .search-card {
      margin-bottom: 10px;

      :deep(.el-card__body) {
        padding: 15px;
      }
    }
  }
}
</style>
